<template>
  <v-layout title="查看/修改订单">
    <el-row type="flex" justify="center" class="confirm">
      <el-col :xl="14" :lg="18" :md="20" :sm="24" :xs="24">
        <div class="tableTitle"><span class="midText">订单基础信息</span></div>
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="100px"
        />
         <div class="tableTitle"><span class="midText">开票信息</span></div>
        <v-form
          :form-title="formTitle1"
          :form-data="formData"
          label-width="100px"
        />
         <div class="tableTitle"><span class="midText">收款信息</span></div>
        <el-card>
<!--          <el-form inline label-width="100px">-->
<!--            <el-form-item label="微赞收款" size="mini">-->
<!--              <el-input :disabled="true" v-model="normalReceipt" placeholder="123"/>-->
<!--            </el-form-item>-->
<!--            <el-button type="primary" size="mini" @click="showNormalTable=!showNormalTable">-->
<!--              {{showNormalTable?'收起':'展开'}}明细-->
<!--            </el-button>-->
<!--            <el-button v-if="financeRole" type="primary" size="mini" @click="addWzReceipt">添加收款</el-button>-->
<!--          </el-form>-->
<!--          <el-collapse-transition>-->
<!--            <div v-show="showNormalTable">-->
<!--              <v-table-->
<!--                :table-title="receiptTableTitle"-->
<!--                :table-data="normalReceiptTableData"-->
<!--                :deletable="false"-->
<!--                :default-operate="financeRole"-->
<!--                :editable="true"-->
<!--                :readable="true"-->
<!--                :show-pagination="false"-->
<!--                @edit="editNormal"-->
<!--                @read="readNormal"-->
<!--              />-->
<!--            </div>-->
<!--          </el-collapse-transition>-->
          <div class="pdt15">
            <v-form
              :form-title="normalInvoiceTitle"
              :form-data="formData"
              label-width="120px"
            />
          </div>
        </el-card>
        <el-card class="mt15">
<!--          <el-form inline label-width="100px">-->
<!--            <el-form-item label="微莱收款" size="mini">-->
<!--              <el-input :disabled="true" v-model="wlReceipt" placeholder="123"/>-->
<!--            </el-form-item>-->
<!--            <el-button type="primary" size="mini" @click="showWlTable=!showWlTable">{{showWlTable?'收起':'展开'}}明细-->
<!--            </el-button>-->
<!--            <el-button v-if="financeRole" type="primary" size="mini" @click="addWlReceipt">添加收款</el-button>-->
<!--          </el-form>-->
<!--          <el-collapse-transition>-->
<!--            <div v-show="showWlTable">-->
<!--              <v-table-->
<!--                :select="false"-->
<!--                :table-title="wlReceiptTableTitle"-->
<!--                :table-data="wlReceiptTableData"-->
<!--                :default-operate="financeRole"-->
<!--                btn-class="btn"-->
<!--                @del="delWl"-->
<!--                @edit="editWl"-->
<!--              />-->
<!--            </div>-->
<!--          </el-collapse-transition>-->
          <div class="pdt15">
            <v-form
              :form-title="wlInvoiceTitle"
              :form-data="formData"
              label-width="120px"
            />
          </div>
        </el-card>

        <div class="tableTitle"><span class="midText">采购信息</span></div>
        <v-form
          :form-title="formTitle2"
          :form-data="formData"
          label-width="100px"
        />

        <div class="tableTitle"><span class="midText">支付返点信息</span></div>
        <v-form
          :form-title="formTitle3"
          :form-data="formData"
          label-width="100px"
        />

        <div class="tableTitle"><span class="midText">收到返点信息</span></div>
        <v-form
          :form-title="formTitle4"
          :form-data="formData"
          label-width="100px"
        />
       <div class="tableTitle"><span class="midText">其余字段</span></div>

        <div class="pdt15">
          <v-form
            :form-title="lastFormTitle"
            :form-data="formData"
            label-width="100px"
          />
        </div>
        <v-messageBox
          v-if="messages.length"
          :messages="messages"
        />

        <el-row v-if="submitable" type="flex" justify="end" class="mt15">
          <el-button type="primary" size="small" @click="reset"> 撤销修改</el-button>
          <el-button type="primary" size="small" @click="confirm"> 确定</el-button>
        </el-row>
      </el-col>
    </el-row>

    <!--添加/修改微萊收款-->
    <el-dialog :visible.sync="showDialog" title="添加/修改收款" width="30%">
      <el-form label-width="120px" size="mini">
        <el-form-item label="收款金额">
          <el-input v-model="addWlReceiptData.money"/>
        </el-form-item>
        <el-form-item label="收款账户">
          <el-input v-model="addWlReceiptData.bank_account"/>
        </el-form-item>
        <el-form-item label="收款银行">
          <el-input v-model="addWlReceiptData.bank"/>
        </el-form-item>
        <el-form-item label="收款时间">
          <el-date-picker
            v-model="addWlReceiptData.create_date"
            value-format="yyyy-MM-dd"
            type="date"/>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" @click="modifyReceiptRecord">确定</el-button>
      </el-row>
    </el-dialog>
  </v-layout>
 </template>

<script>
  import { parseTime } from '@/utils'
  import auth from '@/mixins/auth'
  export default {
    mixins: [auth],
    data() {
      return {
        ad_id: 0,
        index: false, // 编辑微萊收款
        showDialog: false,
        showNormalTable: true,
        showWlTable: true,
        firstTime: true,

        formData: {},
        // 公众号列表
        tencentList: [],
        // 获取银行列表
        wlBankList: [],
        swList: [],
        receiptTableTitle: [
          // {
          //     cn: 'id',
          //     en: 'id',
          // },
          {
            cn: '收款',
            en: 'money'
          },
          {
            cn: '收款银行',
            en: 'invoiceinfo_bank'
          },
          {
            cn: '收款时间',
            en: 'create_date'
          },
          // {
          //     cn: '修改时间',
          //     en: 'update_date',
          // },
          {
            cn: '对应对账编号',
            en: 'check_req_id',
            width: '120px'
          }
        ],
        adPlaceList: [], // 公众号对应位置列表
        normalReceiptTableData: [],
        receiptBankList: [
          {
            label: '微赞兴业银行',
            value: 1
          },
          {
            label: '浙江微莱',
            value: 2
          },
          {
            label: '微赞工商银行',
            value: 3
          },
          {
            label: '微赞泰隆银行',
            value: 4
          },
          {
            label: '微赞浙商银行',
            value: 5
          },
          {
            label: '微赞银行',
            value: 6
          }
        ],

        wlReceiptTableTitle: [
          // {
          //     cn: 'id',
          //     en: 'id',
          // },
          {
            cn: '收款',
            en: 'money'
          },
          {
            cn: '收款账户',
            en: 'bank_account'
          },
          {
            cn: '收款银行',
            en: 'bank'
          },
          {
            cn: '收款时间',
            en: 'create_date'
          },
          {
            cn: '修改时间',
            en: 'update_date'
          }
        ],
        wlReceiptTableData: [],

        addUrl: 'url', // 添加收款的地址
        // 开票公司列表
        companyList: [],

        addWlReceiptData: {},

        originFormData: {},
        // 历史记录
        messages: []
      }
    },
    computed: {
      normalInvoiceTitle() {
        return ([
          {
            cn: '发票号(微赞)',
            en: 'bill_num',
            disabled: !this.assistantRole && !this.financeRole
          },
          {
            cn: '广告主(合同主体)',
            en: 'bill_company',
            type: 'autocomplete',
            disabled: !this.assistantRole && !this.financeRole,
            list: this.companyList
          },
          {
            cn: '收款银行(微赞)',
            en: 'receive_bank',
            disabled: !this.financeRole
          },
          {
            cn: '收款账户(微赞)',
            en: 'receive_account',
            disabled: !this.financeRole
          },
          {
            cn: '收款金额(微赞)',
            en: 'real_price',
            disabled: !this.financeRole
          },
          {
            cn: '收款时间(微赞)',
            en: 'receive_at',
            type: 'datetime',
            disabled: !this.financeRole
          }
        ])
      },
      wlInvoiceTitle() {
        return ([
          {
            cn: '发票号(微萊)',
            en: 'wl_bill_num',
            disabled: !this.financeRole
          },
          {
            cn: '开票公司(微萊)',
            en: 'wl_bill_company',
            type: 'autocomplete',
            disabled: !this.financeRole,
            list: this.companyList
          },
          {
            cn: '收款银行(微萊)',
            en: 'wl_receive_bank',
            disabled: !this.financeRole
          },
          {
            cn: '收款账户(微萊)',
            en: 'wl_receive_account',
            disabled: !this.financeRole
          },
          {
            cn: '收款金额(微萊)',
            en: 'wl_real_price',
            disabled: !this.financeRole
          },
          {
            cn: '收款时间(微萊)',
            en: 'wl_receive_at',
            type: 'datetime',
            disabled: !this.financeRole
          }

        ])
      },
      // 收款金额:自动计算
      normalReceipt() {
        let data = 0
        this.normalReceiptTableData && this.normalReceiptTableData.forEach(item => {
          data += (+item.money || 0)
        })
        return data || 0
      },
      wlReceipt() {
        let data = 0
        this.wlReceiptTableData && this.wlReceiptTableData.forEach(item => {
          data += (+item.money || 0)
        })
        return data || 0
      },
      formTitle() {
        return ([
          {
            cn: 'id',
            en: 'ad_id',
            disabled: true

          },
          {
            cn: '公众号',
            en: 'mp_id',
            type: 'select',
            list: this.tencentList,
            tips: '改公众号, 需要同时改广告位!'
          },
             {
            cn: '广告主类型',
            en: 'advertiser_type',
           type: 'select',
            list: [
              {
                label: '直客',
                value: '直客'
              },
              {
                label: '广告公司',
                value: "广告公司"
              }
            ],
          }, {
            cn: '广告主名称',
            en: 'ad_name'
          },
          {
            cn: '广告类型',
            en: 'ad_type',
            type: 'select',
            list: [
              {
                label: '品牌',
                value: '品牌'
              },
              {
                label: '置换',
                value: '置换'
              },
              {
                label: '商场',
                value: '商场'
              },
              {
                label: '餐饮',
                value: '餐饮'
              }
            ]
          },
          {
            cn: '品牌名',
            en: 'brand'
          },
          {
            cn: '发布日期',
            en: 'publish_at',
            type: 'time'
          },
             {
            cn: '广告位置',
            en: 'ad_place_id',
            type: 'select',
            list: this.adPlaceList
          },{
            cn: '广告价格',
            en: 'ad_price',
            type: 'money'
          },
          {
            cn: '折后金额',
            en: 'amount_discount',
            type: 'money',
            disabled: true
          },
        ])

      },
        formTitle1(){
          return([

          {
            cn: '开票日期',
            en: 'bill_at',
            type: 'time',
            disabled: !this.admin && this.businessRole
          },
          {
            cn: '开票金额',
            en: 'invoice_money',
            disabled: !this.admin && this.businessRole
          },

        ])
      },
  formTitle2(){
          return([
          {
            cn: '外采实际支付金额',
            en: 'actual_amount_outsourcing',
            type: 'money'
          },
          {
            cn: '外采付款银行',
            en: 'paying_bank',
          },
          // {
          //   cn: '对方收款公司名称',
          //   en: 'opposite_collection_company',
          // },
          // {
          //   cn: '发票号',
          //   en: 'invoice_number',
          // },
          {
            cn: '外采付款日期',
            en: 'date_payment',
            type: 'time'
          },
          {
            cn: '外采供应商',
            en: 'supplier',
          }]
          )

      },
          formTitle3(){
          return([

          {
            cn: '财务返点金额',
            en: 'financial_rebate_amount',
            type: 'money'
          },{
            cn: '返点支付银行',
            en: 'rebate_payment_bank',

          },
           {
            cn: '返点支付日期',
            en: 'rebate_payment_date',
            type: 'time'
          },

        ])
      },
          formTitle4(){
          return([
          {
            cn: '收款银行(返点)',
            en: 'receiving_bank_rebate'
          },
          // {
          //   cn: '收款帐户(返点)',
          //   en: 'collection_account_rebate'
          // },
          {
            cn: '收款日期(返点)',
            en: 'collection_date_rebate',
              type: 'time'
          },
          {
            cn: '收款金额(返点)',
            en: 'collection_amount_rebate',
              type: 'money'
          },
        ])
      },

      lastFormTitle() {
        return ([
          {
            cn: '商务助理',
            en: 'xmid',
            type: 'select',
            list: this.swList
          },
          {
            cn: '商务',
            en: 'swid',
            type: 'select',
            list: this.swList
          },
   {
            cn: '返点金额',
            en: 'return_point_price',
            notShow: this.formData.group_id !== 3
          },

           {
            cn: '短视频/直播',
            en: 'media_type',
            type: 'select',
            list: [
              {
                label: '短视频',
                value: 0
              },
              {
                label: '直播',
                value: 1
              }
            ],
            notShow: this.formData.group_id !== 3

          },
           {
            cn: '星图/代下单',
            en: 'order_form',
            // type: 'select',
            // list: [
            //   {
            //     label: '星图下单',
            //     value: 0
            //   },
            //   {
            //     label: '代下单',
            //     value: 1
            //   }
            // ],
            notShow: this.formData.group_id !== 3

          },
          // {
          //   cn: '支付时间',
          //   en: 'payment_date_point',
          //   type: 'time',
          //   notShow: this.formData.group_id !== 3
          // },
          // {
          //   cn: '佣金比例类型',
          //   en: 'subsidiary_type',
          //   type: 'select',
          //   list: [
          //     {
          //       label: '分销佣金比例',
          //       value: 0
          //     },
          //     {
          //       label: '链接佣金比例',
          //       value: 1
          //     }
          //   ],
          //   notShow: this.formData.group_id !== 3
          //
          // },
          // {
          //   cn: '佣金比例',
          //   en: 'subsidiary_point',
          //   type: 'percent',
          //   notShow: this.formData.group_id !== 3
          // },



          {
            cn: '采购成本（含税价）',
            en: 'purchase_cost',
            type: 'money'
          },
          {
            cn: '返点收入',
            en: 'rebate_income',
            type: 'money'
          },

          // {
          //   cn: '订单编号',
          //   en: 'ad_order',
          //   disabled: true
          // },
          // {
          //   cn: '是否预订',
          //   en: 'is_book',
          //   type: 'select',
          //   list: [
          //     {
          //       label: '是',
          //       value: 1
          //     },
          //     {
          //       label: '否',
          //       value: 0
          //     }
          //   ]
          // },
          // {
          //   cn: '收款银行',
          //   en: 'bank_id',
          //   // disabled:true,
          //   type: 'select',
          //   list: this.receiptBankList
          // },
          // {
          //   cn: '是否开具发票',
          //   en: 'is_bill',
          //   type: 'select',
          //   list: [
          //     {
          //       label: '是',
          //       value: 1
          //     },
          //     {
          //       label: '否',
          //       value: 0
          //     }
          //   ]
          // },
          // {
          //   cn: '开票状态',
          //   en: 'invoice_state',
          //   type: 'select',
          //   disabled: true,
          //   list: [
          //     {
          //       label: '商务填写',
          //       value: 0
          //     },
          //     {
          //       label: '助理退回',
          //       value: 1
          //     },
          //     {
          //       label: '助理审核',
          //       value: 2
          //     },
          //     {
          //       label: '财务退回',
          //       value: 3
          //     },
          //     {
          //       label: '财务审核',
          //       value: 4
          //     },
          //     {
          //       label: '开票中',
          //       value: 5
          //     },
          //     {
          //       label: '待领取',
          //       value: 6
          //     },
          //     {
          //       label: '已完成',
          //       value: 7
          //     }
          //   ]
          // },

          // {
          //   cn: '收款状态',
          //   en: 'is_receive',
          //   type: 'select',
          //   disabled: true,
          //   list: [
          //     {
          //       label: '未收款',
          //       value: 0
          //     },
          //     {
          //       label: '部分收款',
          //       value: 1
          //     },
          //     {
          //       label: '收款完成',
          //       value: 2
          //     }
          //   ]
          // },

          {
            cn: '备注',
            en: 'remark',
            type: 'textarea'
          },
          {
            cn: '提交人',
            en: 'fans_name',
            disabled: true
          },
          {
            cn: '删除人',
            en: 'delete_user',
            disabled: true
          },
          {
            cn: '创建时间',
            en: 'created_at',
            disabled: true
          },
          {
            cn: '修改时间',
            en: 'updated_at',
            disabled: true
          },
          // {
          //   cn: '备注(数据查询系统)',
          //   en: 'data_query',
          //   type: 'textarea'
          // }
          ])},

      submitable() {
        if (this.assistantRole || this.admin || this.financeRole) {
          return true
        } else {
          const origin = this.originFormData
          const recent = this.formData
          const datePass = new Date(this.formData.publish_at).getTime() > new Date().getTime()

          let status = true
          for (let key in recent) {
            if (key !== 'swid' && key !== 'xmid' && key !== 'swname' && key !== 'xmname' && origin[key] !== recent[key]) {
              status = false
              break
            }
          }
          if (status && (origin.swid !== recent.swid || origin.xmid !== recent.xmid)) {
            return true
          }

          return (!recent.bill_at && !recent.bill_company && !recent.wl_bill_company && datePass)
        }
      }
    },
    watch: {
      'formData.swid'(val) {
        this.swList.forEach(item => {
          if (val == item.value) {
            this.formData.swname = item.label
          }
        })
      },
      'formData.xmid'(val) {
        this.swList.forEach(item => {
          if (val == item.value) {
            this.formData.xmname = item.label
          }
        })
      },
      'formData.ad_place_id'(val) {
        this.adPlaceList.forEach(item => {
          if (val == item.value) {
            this.formData.ad_place_name = item.label
          }
        })
      },
      'formData.mp_id'(val, val2) {

        if (val !== val2&&!this.firstTime) {
          this.getPlace(val).then(res => {

            if(this.originFormData.mp_id!==val){
              this.formData.ad_place_id = ''
              this.formData.ad_place_name = ''
            }else{
              this.formData.ad_place_id = this.originFormData.ad_place_id
              this.formData.ad_place_name = this.originFormData.ad_place_name
            }
            // this.formData.ad_place_id = ''
          })
        }else{
          this.firstTime = false
        }
      },
      swList(val) {
        val.forEach(item => {
          if (this.formData.swid == item.value) {
            this.formData.swname = item.label
          }
          if (this.formData.xmid == item.value) {
            this.formData.xmname = item.label
          }
        })
      }
    },
    activated() {
      this.ad_id = this.$route.query.id

      // 获取详情
      this.initDetails()
      // this.getReceiptBankList()
      this.getCompanyList()
      this.getSwList()
    },
    methods: {
      initDetails(){
        // 获取详情
        this.getOrderDetail()
        this.getTencentList()
      },
      // 获取开票公司列表
      getCompanyList() {
        // let data = {id:this.fans_id};
        this.$post('action/InvoiceInformation/find')
          .then(res => {
            this.companyList = res.data.map(item => {
              const obj = {}
              obj.label = item.开票公司名称
              obj.value = item.开票公司名称
              return obj
            })
          })
      },
      // 获取广告订单详情
      getOrderDetail() {
        const data = {
          ad_id: this.ad_id
        }
        this.$get('action/WechatAdvs/qryOp', data)
          .then(res => {

            this.formData = res.data.Advs || {}
            this.originFormData = this.$deepClone(res.data.Advs)
            this.normalReceiptTableData = res.data.receiptrecord
            this.wlReceiptTableData = res.data.receiptrecord_wl
            this.getPlace(this.formData.id)

          })
          .catch(err => {
            console.log(err)
            this.$router.go(-1)
          })
      },

      // 获取公众号列表
      getTencentList() {
        this.$get('action/WechatNumber/tree')
          .then(res => {
            const list = []
            if (res.data.WechatTree) {
              res.data.WechatTree.forEach(item => {
                list.push({
                  label: item.name,
                  value: item.id
                })
              })
            }
            this.tencentList = list
          })
      },
      // 获取商务列表
      getSwList() {
        this.$get('action/WxUserCtrl/staffinfo')
          .then(res => {
            const list = []
            if (res.data) {
              res.data.staffinfotree.forEach(item => {
                list.push({
                  label: item.re_name,
                  value: item.id
                })
              })
            }
            this.swList = list
          })
      },

      // 获取公众号id对应位置
      getPlace(val) {
        const data = { mp_id: val }
        return new Promise((resolve, reject) => {
          this.$post('action/WechatNumber/findplaces', data)
            .then(res => {
              if (res.retcode === 0) {
                this.adPlaceList = res.data.map(item => {
                  return { label: item.place_name, value: item.id }
                })
                resolve()
              } else {
                reject()
              }
            })
            .catch(err => {
              reject(err)
            })
        })

      },

      // 获取客户开票列表
      getClientCompanyList(data) {
        this.$post('action/Client/dataGrid', data)
          .then(res => {
            const list = res.data.list.map((item, index) => {
              return item
            })
            this.normalReceiptTableData = list
          })
      },

      // 撤销修改
      reset() {
        this.initDetails()
      },
      // 确认修改广告订单
      confirm() {
        if (this.formData.group_id === 3 && !this.formData.brand) {
          return this.$message({
            message: '品牌名必填',
            type: 'error'
          })
        }
        if(this.formData.mp_id!==this.originFormData.mp_id&&this.formData.ad_place_id===''){
          return this.$alert('改公众号, 需要同时改广告位!', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          });
        }
        const data = { ...this.formData, invoice_money: this.formData.invoice_money || 0, id: this.ad_id }
        this.$post('action/WechatAdvs/update', data)
          .then(res => {
            new Promise((resolve, reject) => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              resolve()
            }).then(_ => this.$router.go(-1))
          })
      },

      addWlReceipt() {
        this.addUrl = 'action/WechatAdvs/receiptrecord_wl_save'
        this.addWlReceiptData = {}
        this.showDialog = true
      },
      addWzReceipt() {
        this.$router.push({
          name: 'reconcile_manage.application',
          query: {
            order: JSON.stringify(this.formData)
          }
        })
      },

      cancel() {
        this.showDialog = false
      },

      // 新增修改微萊收款记录
      // 新增/修改广告订单收款记录
      modifyReceiptRecord(val) {
        const data = {
          adv_id: this.ad_id,
          ...this.addWlReceiptData,
          update_date: parseTime(new Date())
        }
        this.$post('action/WechatAdvs/receiptrecord_wl_save', data)
          .then(res => {
            this.$message({ message: res.msg, type: 'success' })
            if (this.addWlReceiptData.id) {
              this.$set(this.wlReceiptTableData, this.index, data)
            } else {
              this.getOrderDetail()
            }
            this.index = 0
            this.showDialog = false
          })
      },

      delWl(val) { // 删除微萊收款信息
        const data = { id: val.row.id }
        this.$post('action/WechatAdvs/receiptrecord_wl_del', data)
          .then(res => {
            this.getOrderDetail()
            this.$message({ message: res.msg, type: 'success' })
          })
      },
      editWl(val) { // 修改微萊收款信息
        this.index = val.$index
        this.addWlReceiptData = this.$deepClone(val.row)
        this.showDialog = true
      },

      readNormal(val) { // 查看普通收款信息

        this.$router.push({
          name: 'reconcile_manage.preview',
          query: { id: val.row.id }
        })
      },
      editNormal(val) {
        this.$router.push({
          name: 'reconcile_manage.application',
          query: { id: val.row.check_req_id }
        })
      }
    }
  }
</script>

<style scoped>
.tableTitle {
    position: relative;
    margin: 10px auto;
    width: 1000px;
    height: 2px;
    background-color: #d4d4d4;
    text-align: center;
    font-size: 16px;
    color: rgba(101, 101, 101, 1);
  }
 .midText {
    position: absolute;
    left: 50%;
    background-color: #ffffff;
    padding: 0 15px;
    transform: translateX(-50%) translateY(-50%);
  }
</style>
